Skip to main content

项目结构规范

react的项目推荐标准

按照路由或者功能来组织

  • 避免多层嵌套
  • 不要过度思考

命名选择: 帕斯卡规范

采用混合方式划分文件结构

  • 采用类型划分的优势
  • 添加功能划分的特点
src/
|----app.js // 整个应用的入口
|----app.css
|----views  // 应用中某个路由的文件 一般为路由组件
|    |----Home.js
|    |----Home.css
|    |----HomeRedux.js // home页面中所有与redux相关的汇总
|----components // 所有应用的组件
|    |----Home // 在view中有一个名为Home的view 在这就有一个名为Home的子文件夹
|    |    |----Table.js // home中的一个列表组件
|    |    |----Table.css
|    |    |----TableRedux.js
|    |    |----Table // 另一种方式 如果组件很多 文件夹打开会很长
|    |    |    |----Index.js
|    |    |    |----Index.css
|    |    |    |----IndexRedux.js
|    |----shared // 不归属于任何view的组件 比如公共组件
|----container
|    |----DevTool.js // 配置DevTool
|    |----Root.js // 一般被app.js依赖
|----layout // 布局相关的组件 如菜单 侧边栏
|----redux
|    |----reducers.js // 
|----routes // 路由相关的配置
|----utils // 工具函数常量等
|----styles // 全局公共样式

单文件组件文件的大小写​

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。 单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而，混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题，这也是横线连接命名同样完全可取的原因。

components
|---- MyComponent.vue

或者

components
|---- my-component.vue

基础组件命名​

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V

components
|---- BaseButton.vue
|---- BaseTable.vue
|---- BaseIcon.vue

components
|---- AppButton.vue
|---- AppTable.vue
|---- AppIcon.vue

components
|---- VButton.vue
|---- VTable.vue
|---- VIcon.vue

单例组件命名​

只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

components
|---- TheHeading.vue
|---- TheSidebar.vue

紧密耦合的组件名​

components
|---- TodoList.vue
|---- TodoListItem.vue
|---- TodoListItemButton.vue

组件名的单词顺序​

组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。

components
|---- ClearSearchButton.vue
|---- ExcludeFromSearchInput.vue
|---- LaunchOnStartupCheckbox.vue
|---- RunSearchButton.vue
|---- SearchInput.vue
|---- TermsCheckbox.vue
components
|---- SearchButtonClear.vue
|---- SearchButtonRun.vue
|---- SearchInputExcludeGlob.vue
|---- SearchInputQuery.vue
|---- SettingsCheckboxLaunchOnStartup.vue
|---- SettingsCheckboxTerms.vue

模版中的组件名大小写​

对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。